<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>房子信息详情页</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-fileinput/css/fileinput.min.css}">
</head>
<body id="body">
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <!-- 提示框信息 -->
    <div th:replace="point-modal::modal"></div>
    <!-- 房子详情展示 -->
    <div class="container">
        <div class="pt-5 pb-5 gray-simple" style="height: 200px;">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-md-10 col-sm-12">
                        <div class="prt_detail_three_clicks">
                            <div class="pdt_clicks_price"><h4 th:text="${house.monthRent} + '/月'"></h4></div>
                            <div class="pdt_clicks_title">
                                <h4 th:text="${house.title}"></h4>
                            </div>
                            <div class="pdt_clicks_location">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="ti-location-pin"  th:text="${house.address}"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <div class="map-container">
                                        <iframe th:src="@{/houseMap(houseId=${house.id})}" width="470px" height="300px"></iframe>
                                    </div>
                                </div>
                            </div>
                            <!-- 再添加一个收藏按钮 -->
                            <ul class="like_share_list">
                                <li style="margin: 0 auto;">
                                    <input id="houseId" th:value="${house.id}" hidden>
                                    <div class="row">
                                        <!-- 再添加收藏、联系、预约按钮 -->
                                        <div style="margin: 0 auto;display: inline-flex;">
                                            <a href="#" class="btn btn-likes" onclick="markHouse()" style="width: 120px; height: 40px;margin-left: 10px; margin-right: 10px">
                                                <i class="fas fa-heart"></i>
                                                <span id="houseMarkBtn" th:text="${house.isMarked != true?'收藏':'已收藏'}"></span>
                                            </a>
                                            <a href="#" style="width: 120px; height: 40px;margin-left: 10px; margin-right: 10px"
                                               class="btn nav-link dropdown-toggle"
                                               id="navbarDropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                立即预约
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                                                <div class="agent-_blocks_wrap b-0">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="form-group">
                                                                <label>入住日期</label>
                                                                <div class="cld-box">
                                                                    <input type="date" name="checkin" id="startDate" class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="form-group">
                                                                <label>退租日期<span id="dateCheck" hidden="hidden">(退租日期不能小于入住日期)</span></label>
                                                                <div class="cld-box">
                                                                    <input type="date" name="checkout" id="endDate" class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="form-group">
                                                                <button class="btn-theme btn full-width bg-2" onclick="createOrder()" th:if="${house.status == 0 || house.status == 1}">预约</button>
                                                                <button class="btn-theme btn full-width bg-red" disabled="disabled" th:if="${house.status != 0 && house.status != 1}">不可预约</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- 房子信息展示 -->
            <div class="container">
                <section class="gray-dark" style="width: 50%; float: left; height: 470px;">
                    <div class="row" style="width: 892px;">
                        <div class="col-lg-8 col-md-12" style="margin-left: 10px; margin-top: -68px;">
                            <div class="property_block_wrap style-2" style="height: 450px;">
                                <div class="property_block_wrap_header">
                                    <h4 class="property_block_title">房子详细信息</h4>
                                </div>
                                <div>
                                    <div class="block-body">
                                        <ul class="deatil_features">
                                            <li>
                                                <strong>状态：</strong>
                                                <span th:switch="${house.status}">
                                                <span th:case="0">未出租</span>
                                                <span th:case="1">已出租</span>
                                                <span th:case="-1">已下架</span>
                                                <span th:case="-2">待审核</span>
                                                <span th:case="-3">审核驳回</span>
                                                <span th:case="*">未知状态</span>
                                            </span>
                                            </li>
                                            <li>
                                                <strong>月租金：</strong>
                                                <span th:text="'￥' + ${house.monthRent} + '/月'"></span>
                                            </li>
                                            <li>
                                                <strong>房屋/房间面积：</strong>
                                                <span th:text="${house.area} + '平米'"></span>
                                            </li>
                                            <li>
                                                <strong>卧室数量：</strong>
                                                <span th:text="${house.bedroomNum} + '个'"></span>
                                            </li>
                                            <li>
                                                <strong>卫生间数量：</strong>
                                                <span th:text="${house.toiletNum} + '个'"></span>
                                            </li>
                                            <li>
                                                <strong>厨房数量：</strong>
                                                <span th:text="${house.kichenNum} + '个'"></span>
                                            </li>
                                            <li>
                                                <strong>客厅数量：</strong>
                                                <span th:text="${house.livingRoomNum} + '个'"></span>
                                            </li>
                                            <li>
                                                <strong>建成年份：</strong>
                                                <span th:text="${house.buildYear} + '年'"></span>
                                            </li>
                                            <li>
                                                <strong>朝向：</strong>
                                                <span th:text="${house.direction}"></span>
                                            </li>
                                            <li>
                                                <strong>楼层：</strong>
                                                <span th:text="${house.floor} + '楼(共'+ ${house.maxFloor} + '楼)'"></span>
                                            </li>
                                            <li>
                                                <strong>空调：</strong>
                                                <span th:switch="${house.hasAirConditioner}">
                                                    <span th:case="1">有</span>
                                                    <span th:case="0">无</span>
                                                </span>
                                            </li>
                                            <li>
                                                <strong>电梯：</strong>
                                                <span th:switch="${house.hasElevator}">
                                                    <span th:case="1">有</span>
                                                    <span th:case="0">无</span>
                                                </span>
                                            </li>
                                            <li>
                                                <strong>类型：</strong>
                                                <span th:switch="${house.rentType}">
                                                    <span th:case="whole">整租</span>
                                                    <span th:case="share">合租</span>
                                                </span>
                                            </li>
                                            <li>
                                                <strong>联系人：</strong>
                                                <span th:text="${house.contactName}"></span>
                                            </li>
                                            <li>
                                                <strong>联系电话：</strong>
                                                <span th:text="${house.contactPhone}"></span>
                                            </li>
                                            <!-- 如果是合租，显示已入住人数和剩余房间数；如果是合租，显示是否已出租 -->
                                            <li th:if="${house.rentType == 'share'}">
                                                <strong>已出租：</strong>
                                                <span th:text="${house.hasRentRoom} + '间'"></span>
                                            </li>
                                            <li th:if="${house.rentType=='share'}">
                                                <strong>剩余：</strong>
                                                <span th:text="${(house.bedroomNum > house.hasRentRoom) ?(house.bedroomNum - house.hasRentRoom) : 0 } + '间'"></span>
                                            </li>
                                            <li th:if="${house.rentType == 'whole'}">
                                                <strong>出租情况：</strong>
                                                <span th:text="${house.hasRentRoom == 0?'未出租':'已出租'}"></span>
                                            </li>
                                        </ul>
                                        <strong>详细说明：</strong>
                                        <span th:utext="${house.content}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 轮播图展示 -->
                <div class="featured_slick_gallery-slide" style="width: 50%; float:right;margin-top: -10px;">
                    <div th:each="list:${house.slideImgList}">
                        <div class="featured_slick_padd">
                            <a th:href="@{|/assets/img/house/${list}|}" class="mfp-gallery">
                                <img th:src="@{|/assets/img/house/${list}|}" style="width: 100%;height: 470px;padding-right: 5px;" class="img-fluid mx-auto" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>
</body>
</html>